import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';
import React, { useState } from 'react';
import Router from "../router/router"
import './index.css'
import First from './one';
import Class from './classs';
import Jjie from './jianjie';
import Fushu from './fshu_image';
import Sxuan from './sxuan';
import Bigclass from './bigvlass';
const { Header, Content, Sider } = Layout;
const items1 = ['1', '2', '3','4','5','6'].map((key) => ({
  key,
  label: `nav ${key}`,
}));

const Navone = () => {
  const [Idkey,setIdkey]=useState('1')
  const handkey = ({ key }) => {
    console.log("wochu")
    setIdkey(key)
}
const People = () => {
    if (Idkey === '1') {
        return <First />
    }
    else if (Idkey === '2') {
        return <Class />
    }
    else if (Idkey === '3') {
      return <Jjie />
  }
  else if (Idkey === '4') {
    return <Fushu />
}
else if (Idkey === '5') {
  return <Sxuan />
}
else if (Idkey === '6') {
  return <Bigclass />
}
    
}
return(
  <div>
  <Layout >
   <Router handkey={handkey} items1={items1}/>
    <Layout>
      
      <Layout
        style={{
          padding: '0 24px 24px',
          minHeight:document.documentElement.clientHeight,
        }}
      >
        <Breadcrumb
          style={{
            margin: '16px 0',
          }}
        >
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
          }}
        >
         <People/>
         
        </Content>
      </Layout>
    </Layout>
  </Layout>
  </div>
)
};
export default Navone;